<template>
  <div class="server-config">
    <!-- 指定服务器 -->
    <el-form-item 
      label="指定服务器" 
      prop="serverIds"
      :rules="[
        { required: true, message: '请选择运行服务器', trigger: 'change' }
      ]"
    >
      <el-select
        v-model="modelValue.serverIds"
        multiple
        filterable
        placeholder="选择工作流运行的服务器"
        style="width: 100%"
      >
        <el-option
          v-for="server in servers"
          :key="server.id"
          :label="server.name"
          :value="server.id"
        >
          <div class="server-option">
            <span>{{ server.name }}</span>
            <el-tag 
              size="small"
              :type="server.status === 'online' ? 'success' : 'danger'"
            >
              {{ server.status === 'online' ? '在线' : '离线' }}
            </el-tag>
          </div>
        </el-option>
      </el-select>
      <div class="form-tip">
        创作者工作流必须指定运行服务器
      </div>
    </el-form-item>

    <!-- 排除服务器 -->
    <el-form-item label="排除服务器" prop="excludeServerIds">
      <el-select
        v-model="modelValue.excludeServerIds"
        multiple
        filterable
        placeholder="选择不运行工作流的服务器"
        style="width: 100%"
      >
        <el-option
          v-for="server in servers"
          :key="server.id"
          :label="server.name"
          :value="server.id"
        >
          <div class="server-option">
            <span>{{ server.name }}</span>
            <el-tag 
              size="small"
              :type="server.status === 'online' ? 'success' : 'danger'"
            >
              {{ server.status === 'online' ? '在线' : '离线' }}
            </el-tag>
          </div>
        </el-option>
      </el-select>
      <div class="form-tip">
        当指定和排除服务器冲突时，以指定服务器为准
      </div>
    </el-form-item>

    <!-- 算力消耗 -->
    <el-form-item label="算力消耗" prop="powerConsumption">
      <el-input-number
        v-model="modelValue.powerConsumption"
        :min="1"
        :max="100"
        :step="1"
        style="width: 100%"
      />
      <div class="form-tip">
        预估的算力消耗，影响服务器调度和计费
      </div>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const props = defineProps<{
  modelValue: {
    serverIds?: string[]
    excludeServerIds?: string[]
    powerConsumption?: number
  }
}>()

const emit = defineEmits(['update:modelValue'])

// 服务器列表
const servers = ref<any[]>([])

// 加载服务器列表
onMounted(async () => {
  try {
    const response = await axios.get(`${import.meta.env.VITE_API_URL}/servers`)
    servers.value = response.data
  } catch (error: any) {
    ElMessage.error(`加载服务器列表失败: ${error.message}`)
  }
})
</script>

<style scoped lang="scss">
.server-config {
  .server-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .form-tip {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
  }
}

.dark {
  .form-tip {
    color: #999;
  }
}
</style> 